<template>
  <div id="login">
    <div className="lef">
      <div className="box">
        <h2>智慧养老后台管理系统</h2>
        <p>智能健康信息及服务管理；</p>
        <p>实现资源的优化配置和管理，降低运营成本。</p>
        <div className="img">
          <img src="https://cdn7.axureshop.com/demo2024/2296569/images/%E7%99%BB%E5%BD%95/u928.png" alt="" />
        </div>
      </div>
    </div>
    <div className="rig">
      <div className="box">
        <div class="time">
          <div className="img">
            <img src="https://cdn7.axureshop.com/demo2024/2296569/images/%E7%99%BB%E5%BD%95/u925.svg" alt="" />
          </div>
          <p>欢迎登录</p>
        </div>
        <div className="form">
          <a-form :model="formState" name="basic" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }"
            autocomplete="off">
            <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
              <a-input v-model:value="formState.username" placeholder="请输入用户名" style="height: 45px;" />
            </a-form-item>

            <a-form-item name="password"
              :rules="[{ required: true, message: '请输入密码!' }, { min: 6, message: '密码长度至少6位！' }]">
              <a-input v-model:value="formState.password" placeholder="请输入密码" style="height: 45px;" />
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
              <a-button type="primary" @click="handleSubmit(formState)" html-type="submit"
                style="width: 100%;height: 45px;background-color: #3DD4A7;">登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import router from '@/router';
import houseApi from '@/axios';

const errorMessage = ref(null)

interface FormState {
  username: string;
  password: string;
}

const formState = reactive<FormState>({
  username: '',
  password: '',
});
// 提交表单
const handleSubmit = async (value: any) => {
  errorMessage.value = null // 重置错误消息
  try {
    const response = await houseApi.post('/login', value)
    if (response.data.code === 1) {
      alert(response.data.message)
    } else if (response.data.code === 2) {
      alert(response.data.message)
    } else {
      localStorage.setItem('accessToken', response.data.accessToken)
      localStorage.setItem('refreshToken', response.data.refreshToken)
      localStorage.setItem('roleid', response.data.roleid)
      localStorage.setItem('user', JSON.stringify(response.data.username))
      router.push('/home/workbench') // 登录成功后跳转
    }
  } catch (error) {
    // 处理错误
    if (error.response) {
      errorMessage.value = error.response.data.message || 'Login failed'
    } else {
      errorMessage.value = 'An unexpected error occurred'
    }
  }

}
</script>
<style scoped lang="scss">
#login {
  width: 100%;
  height: 100vh;
  background-color: #f2fbfa;
  display: flex;

  .lef {
    width: 50%;
    height: 100%;
    text-align: center;

    .box {
      margin-top: 26%;
      margin-left: 20%;

      h2 {
        font-weight: normal;
        margin-bottom: 20px;
        letter-spacing: 2px;
        font-size: 22px;
      }

      p {
        font-size: 13px;
        color: #A1A2A1;
        margin-bottom: 10px;
        letter-spacing: 2px;
      }

      .img {
        margin-top: 20px auto;
        width: 600px;
        height: 390px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .rig {
    width: 50%;

    .box {
      margin-top: 18%;
      margin-left: 10%;
      width: 60%;
      height: 65%;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
      overflow: hidden;

      .time {
        margin-top: 100px;

        .img {
          margin: 0 auto;
          width: 45px;
          height: 45px;
          border-radius: 10px;
          background: linear-gradient(to bottom, #44D4A5, #F6DB6D);
          position: relative;

          img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }

      p {
        font-size: 25px;
        margin-top: 16px;
        margin-bottom: 30px;
        letter-spacing: 5px;
      }

      .form {
        width: 75%;
        margin: 80px auto;
      }
    }
  }
}
</style>
